<script setup>
import {onMounted, reactive, ref, watch, nextTick} from "vue";
import {FwbSelect, FwbDropdown, FwbListGroup, FwbListGroupItem} from "flowbite-vue";
import ChangePwd from "@/pages/System/changePwd.vue";
import themeStore from '@/store/modules/theme.js'
const store = themeStore()

const selected = reactive({
  language: 'English',
  mode: store.themeFlag,
})
const modeText = ref(store.themeFlag === 1 ?  'Drak' : 'Light')
const LanguageOptions = ref([
  {value: 1, name: 'English'},
  {value: 2, name: 'Chinese'},
])
const ModeOptions = ref([
  {value: 1, name: 'Drak'},
  {value: 2, name: 'Light'},
])
// 选择语言
const clickTextUrl = text => {
  selected.language = text
}
// 选择主题
const clickMode = mode => {
  selected.mode = mode.value
  modeText.value = mode.name
}
watch(() => selected.mode, newVal => {
  console.log('newVal', newVal);
  store.changeThemeFlag(newVal)
  store.changeTheme()
})
const storageList = ref([
  {
    id: 1, name: 'Disk 1',
    settings: [
      {content: 'Maximum Disk Storage Capacity', value: '1,024,000 MB', desc: 'The maximum storage capacity of your first storage disk.'},
      {content: 'Maximum Video Storage Capacity', value: '90%', desc: 'Percentage of storage capacity videos can be recorded to'},
      {content: 'Maximum Timelapse Storage Capacity', value: '5%', desc: 'Percentage of storage capacity Timeplases can be recorded to'}
    ],
  },{
    id: 2, name: 'Disk 2',
    settings: [
      {content: 'Maximum Disk Storage Capacity', value: '1,024,000 MB', desc: 'The maximum storage capacity of your first storage disk.'},
      {content: 'Maximum Video Storage Capacity', value: '90%', desc: 'Percentage of storage capacity videos can be recorded to'},
      {content: 'Maximum Timelapse Storage Capacity', value: '5%', desc: 'Percentage of storage capacity Timeplases can be recorded to'}
    ],
  },{
    id: 3, name: 'Other Storage',
    settings: [
      {content: 'Number of Days to keep Continuous Recordings', value: '1,024,000 MB', desc: 'Continous recordings will be automatically deleted after this day'},
      {content: 'Number of Days to keep Event-triggered Recordings', value: 'Never', desc: 'Event-triggered recordings will be automatically deleted after this day'},
      {content: 'Number of Days to keep Activity Log', value: '90 days', desc: 'Activity Logs will be automatically deleted after this day'}
    ],
  }
])
const alerts = ref([
  {content: 'Alert Sound', value: 'No Sound', desc: 'Sound when an event is detected by cameras'},
  {content: 'Alert Sound Delay', value: '0 secs', desc: 'Delay until next time an event can start an Alert, measured in seconds'},
  {content: 'Popup Camera on Alert', value: 'On', desc: 'When an event is detected, show a popup of the of the relevant camera'}
])
const ChangePwdRef = ref(null)
const ChangePassword = () => {
  ChangePwdRef.value.showModal()
}
</script>
<template>
  <div class="w-full h-[100vh] relative">
    <div
      class="text-[2rem] themeFontColor font-SemiBold py-[32px] border-b border-solid border-[var(--grid)] s2k:py-[46.6px] s4k:py-[64px]">
      <div class="flex flex-row justify-between items-center px-[32px] s4k:px-[32px] h-full">
        <span class="themeFontColor">System setting</span>
      </div>
    </div>
    <div class="list w-full h-[calc(100vh_-_64px)] s2k:h-[calc(100vh_-_85px)] s4k:h-[calc(100vh_-_128px)] flex flex-col items-center">
      <Modal title="DISPLAY SETTINGS" :editShow="false">
        <template #body>
          <div class="flex flex-row justify-between items-center mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px]">
            <div class="startTimeDate flex flex-col justify-center items-start relative">
              <span class="text-[1rem] themeFontColor font-[500] font-Medium mb-[4px] s4k:absolute s4k:top-0 z-[10]">Language</span>
              <svg-icon name="earth" width="16px" height="16px" class="svgClass s2ksvg s4ksvg z-[10] absolute left-[3%] top-[55%] s2k:top-[60%] s4k:top-[60%]"></svg-icon>
              <fwb-dropdown :text="selected.language" id="dropdownLanguage">
                <fwb-list-group id="group">
                  <fwb-list-group-item hover v-for="v in LanguageOptions" :key="v.value" @click="clickTextUrl(v.name)">{{v.name}}</fwb-list-group-item>
                </fwb-list-group>
              </fwb-dropdown>
            </div>
            <div class="startTimeDate flex flex-col justify-center items-start relative">
              <span class="text-[1rem] themeFontColor font-[500] font-Medium mb-[4px] s4k:absolute s4k:top-0 z-[10]">Display Mode</span>
              <fwb-dropdown :text="modeText" id="dropdownMode">
                <fwb-list-group id="group">
                  <fwb-list-group-item hover v-for="v in ModeOptions" :key="v.value" @click="clickMode(v)">{{v.name}}</fwb-list-group-item>
                </fwb-list-group>
              </fwb-dropdown>
            </div>
          </div>
        </template>
      </Modal>
      <Modal title="ACCOUNT LOGIN" :editShow="false">
        <template #body>
          <p class="text-[#9CA3AF] text-[1rem] font-Medium">Email</p>
          <p class="text-[var(--theme-font-color)] text-[1.3rem] font-Medium mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">admin@hydrogen.ai</p>
          <p class="text-[#3F83F8] text-[1.3rem] mt-[24px] font-Medium cursor-pointer s2k:mt-[32px] s4k:mb-[48px]" @click="ChangePassword">Edit password</p>
        </template>
      </Modal>
      <Modal title="STORAGE SETTINGS" :editShow="true">
        <template #body>
          <div  v-for="item in storageList" :key="item.id" id="storageList" class="mt-[12px] s2k:mt-[16px] s4k:mt-[24px] pb-[28px] s2k:pb-[37.3px] s4k:pb-[56px] border-b border-solid border-[var(--grid)]">
            <p class="text-[#9CA3AF] text-[1.13rem] font-Medium">{{item.name}}</p>
            <div class="flex flex-col justify-start mt-[32px] s2k:mt-[42.6px] s4k:mt-[64px]" v-for="v in item.settings" :key="v.value">
              <div class="flex flex-row justify-between text-[1.3rem] text-[var(--theme-font-color)]">
                <div>{{v.content}}</div>
                <div class="mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px] text-[#9CA3AF]">{{v.value}}</div>
              </div>
              <div class="text-[1.13rem] text-[#9CA3AF]">{{v.desc}}</div>
            </div>
          </div>
        </template>
      </Modal>
      <Modal title="ALERT" :editShow="true">
        <template #body>
          <div class="pb-[10px] s2k:pb-[13.3px] s4k:pb-[20px]">
            <div class="flex flex-col justify-start mt-[32px] s2k:mt-[42.6px] s4k:mt-[64px]" v-for="v in alerts" :key="v.value">
              <div class="flex flex-row justify-between text-[1.3rem] text-[var(--theme-font-color)]">
                <div>{{v.content}}</div>
                <div class="mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px] text-[#9CA3AF]">{{v.value}}</div>
              </div>
              <div class="text-[1.13rem] text-[#9CA3AF]">{{v.desc}}</div>
            </div>
          </div>
        </template>
      </Modal>
      <div class="mb-[100px] s2k:mb-[130px] s4k:mb-[200px]"></div>
    </div>
    <ChangePwd ref="ChangePwdRef"/>
  </div>
</template>

<style lang="scss" scoped>
#dropdownLanguage, #dropdownMode{
  :deep(button){
    background: var(--theme);
    border: solid var(--grid) 1px;
    box-shadow: none;
    color: var(--theme-font-color);
    background-color: var(--theme) !important;
    box-sizing: border-box;
    cursor: pointer;
    width: 452px;
    height: 45px;
    border-radius: 8px;
    font-size: 1.13rem;
    padding: 0 0 0 35px;
    margin-top: 3px;
    position: relative;
    svg{
      position: absolute;
      right: 3%;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      color: var(--svg);
    }
  }
  #group{
    width: 450px;
    color: var(--theme-font-color);
    border-radius: 0px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    li{
      padding-left: 15px;
      padding-right: 0;
      cursor: pointer;
      font-size: 1.13rem;
      border-bottom: solid var(--grid) 1px;
      &:hover{
        color: var(--theme-font-color-hover);
        background-color: var(--grid);
      }
    }
  }
}
#dropdownMode {
  :deep(button){
    padding: 0 0 0 15px;
  }
}
#storageList{
  &:last-child{
    border: none;
    padding-bottom: 10px;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.4) !important;
  }
  #dropdownLanguage, #dropdownMode{
    :deep(button){
      width: 603px;
      height: 60px;
      padding: 0 0 0 47px;
      margin-top: 6px;
      svg{
        width: 20px;
        height: 20px;
      }
    }
    #group{
      width: 600px;
      position: absolute;
      bottom: -95px;
      li{
        padding-left: 20px;
        height: 30px;
      }
    }
  }
  #dropdownMode {
    :deep(button){
      padding: 0 0 0 20px;
    }
  }
}

@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(2) !important;
  }
  #dropdownLanguage, #dropdownMode{
    :deep(button){
      width: 904px;
      height: 90px;
      padding: 0 0 0 70px;
      margin-top: 45px;
      svg{
        width: 30px;
        height: 30px;
      }
    }
    #group{
      width: 900px;
      position: absolute;
      bottom: -135px;
      li{
        padding-left: 30px;
        height: 40px;
      }
    }
  }
  #dropdownMode {
    :deep(button){
      padding: 0 0 0 30px;
    }
  }
}
</style>
